<template>
  <!-- 轮播图容器 -->
  <div class="carousel-container">
    <!-- 轮播图包装器 -->
    <div class="carousel-wrapper" ref="wrapper">
      <!-- 轮播图轨道，使用 transform 实现平滑滚动 -->
      <div 
        class="carousel-track" 
        ref="track"
        :style="{ transform: `translateX(${-currentPosition}px)` }"
        @transitionend="handleTransitionEnd"
      >
        <!-- 克隆最后两个项目用于无缝滚动 -->
        <div v-for="(image, index) in lastItems" :key="`last-${index}`" class="carousel-item">
          <img :src="image" alt="carousel image">
        </div>

        <!-- 原始图片项目 -->
        <div v-for="(image, index) in images" :key="index" class="carousel-item">
          <a :href="`/classify/${image.url}-${image.classify_id.split('-')[1]}.html`" target="_self" title="图片">
          <img :src="image.image" alt="carousel image">
        </a>
        </div>

        <!-- 克隆前两个项目用于无缝滚动 -->
        <div v-for="(image, index) in firstItems" :key="`first-${index}`" class="carousel-item">
          <img :src="image" alt="carousel image">
        </div>
    </div>
    </div>
          </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, onUnmounted } from 'vue';

// 定义组件属性，接收图片数组
const props = defineProps<{
  images: string[];
}>();

const gotoShopType = (item: any) => {
  const id = item.classify_id.split("-")[1]
  window.location.href = `/classify/${item.url.url}-${id}.html`
  // router.push({
  //   name: 'Products',
  //   query: {
  //     classify_id: item.classify_id
  //   }
  // })
}
// 常量定义
const VISIBLE_ITEMS = 3; // 同时显示3个图片
const wrapper = ref<HTMLElement | null>(null); // 包装器引用
const track = ref<HTMLElement | null>(null); // 轨道引用
const currentPosition = ref(0); // 当前位置
const itemWidth = ref(0); // 每个项目的宽度
const isTransitioning = ref(false); // 是否正在过渡
let autoScrollInterval: number; // 自动滚动定时器

// 计算属性：克隆首尾项目用于无缝滚动
const firstItems = computed(() => props.images.slice(0, VISIBLE_ITEMS));
const lastItems = computed(() => props.images.slice(-VISIBLE_ITEMS));

// 初始化轮播图
const initCarousel = () => {
  if (!wrapper.value) return;
  
  // 根据窗口宽度和可见项目数计算每个项目的宽度
  itemWidth.value = window.innerWidth / VISIBLE_ITEMS;
  
  // 设置初始位置，显示第一组项目
  currentPosition.value = VISIBLE_ITEMS * itemWidth.value;
};

// 开始自动滚动
const startAutoScroll = () => {
  autoScrollInterval = window.setInterval(() => {
    if (!isTransitioning.value) {
      moveNext();
    }
  }, 5000); // 每3秒滚动一次
};

// 移动到下一组图片
const moveNext = () => {
  if (!track.value) return;
  
  isTransitioning.value = true;
  currentPosition.value += itemWidth.value * VISIBLE_ITEMS;
  track.value.style.transition = 'transform 0.5s ease-in-out';
};

// 处理过渡结束事件
const handleTransitionEnd = () => {
  if (!track.value) return;
  
  isTransitioning.value = false;
  
  // 如果滚动到克隆项目的末尾，重置位置
  if (currentPosition.value >= (props.images.length + VISIBLE_ITEMS) * itemWidth.value) {
    track.value.style.transition = 'none';
    currentPosition.value = VISIBLE_ITEMS * itemWidth.value;
  }
};

// 组件挂载时初始化
onMounted(() => {
  initCarousel();
  startAutoScroll();
  
  // 监听窗口大小变化
  window.addEventListener('resize', initCarousel);
});

// 组件卸载时清理
onUnmounted(() => {
  clearInterval(autoScrollInterval);
  window.removeEventListener('resize', initCarousel);
});
</script>

<style lang="scss" scoped>
// 轮播图容器样式
.carousel-container {
  width: 100vw;
  overflow: hidden;
  position: relative;
      margin: 0;
      padding: 0;
}

// 轮播图包装器样式
.carousel-wrapper {
  width: 100%;
}

// 轮播图轨道样式
.carousel-track {
  display: flex;
  width: fit-content;
}

// 轮播图项目样式
.carousel-item {
  flex: 0 0 auto;
  width: 33.333vw; // 每个项目占据视口宽度的三分之一
  height: 100%;
  
  // 图片样式
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}
</style>